<template>
    <qf-Table :tableData="tableData"
    :tableLoading="tableLoading"
     :columns="columns" align="center">
        <!-- //头像显示 -->
        <template v-slot:imageUrl="{ row }">
            <!-- <el-avatar shape="square" :src="row.imageUrl"></el-avatar> -->
            <img :src="row.imageUrl" width="100">
        </template>

        <template v-slot:action="{ row }">
            <!-- 自定义图标 -->
            <el-button type="success">
                <template #icon>
                    <i class="iconfont icon-vip3"></i>
                </template>
                <!-- 自定义语法 -->
                <template #default>
                    点击充值
                </template>
            </el-button>
        </template>
    </qf-Table>
</template>
<script setup>
import qfTable from "../../../../components/qfTable/index.vue"
//引入发送请求的方法
import * as api from "../../../../api/pay"
import { ref } from "vue"
//动态定义表头

let columns = [
    {
        label: "产品图片",
        prop: "imageUrl"
    },
    {
        label: "产品名称",
        prop: "productName"
    },
    {
        label: "产品描述",
        prop: "description"
    },
    {
        label: "产品价格",
        prop: "price"
    },
    {
        label: "库存",
        prop: "inventory"
    },
    {
        label: '充值',
        prop: 'action'
    }
]

//声明一个数据,用于注入给表格

let tableData = ref([])

//声明控制加载动画的变量
let tableLoading = ref(false)

//获取产品
let getList = async () => {
    tableLoading.value = true;
    try {
        let res = await api.getCategoryApi()
        // console.log(res)
        tableData.value = res.data.data.reverse()
        tableLoading.value = false;
    } catch (e) {
        console.log(e)
        tableLoading.value = false
    }
}
getList()


</script>
<script>
export default {
    meta: {
        title: 'vipCharge',
        name: 'vip充值',
        routeName: "vipCharge",
        icon: "icon-chongzhi"
    }
}
</script>